<template>
    <Layout>
            <Card dis-hover >
                <h3>
                    {{taskInfo.taskName}}
                </h3>
                <ButtonGroup slot="extra"  v-if="!taskInfo.viewFlag">

                    <Button  @click="submitAndUpdate('dataToView')" type="warning" style="background: #EF5350;" :loading="buttonloading1"  v-if="taskInfo.procinstState === '2'">
                        <Icon type="ios-bookmark" />
                        审批
                    </Button>
                    <Button  @click="submit('dataToView')" type="warning" style="background: #EF5350;" :loading="buttonloading1" v-else>
                        <Icon type="ios-bookmark" />
                        审批
                    </Button>

                    <Button @click="returnTo">
                        返回
                        <Icon type="ios-arrow-forward" />
                    </Button>
                </ButtonGroup>
                <ButtonGroup slot="extra"  v-else>
                    <Button @click="returnTo">
                        返回
                        <Icon type="ios-arrow-forward" />
                    </Button>
                </ButtonGroup>

            </Card>
        <Row>
            <i-col  span="24">
                <Card dis-hover style="margin-top: 10px">
                    <div :style="{ overflowY: 'auto'}" v-if="taskInfo.procinstState === '2'"  >
                        <Col span="18">
                            <Form :model="dataToView" class="modal-form" ref="dataToView" :label-width="160">
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="23" >
                                        <FormItem label="集团名称：" prop="belongOrgId">
                                            <Select class='query-form-el' placeholder="集团名称"  v-model='dataToView.belongOrgId' disabled  label-in-value >
                                                <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11" >
                                        <FormItem label="年度：" prop="year" >
                                            <DatePicker class="query-form-el" type="year" placeholder="请输入" disabled v-model="dataToView.yearDate"></DatePicker>
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <FormItem label="检查企业数量：" prop="checkNumCompany" >
                                            <InputNumber class="query-form-el" :min="0" type="text" v-model="dataToView.checkNumCompany"></InputNumber>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11" >
                                        <FormItem label="检查开始时间：" prop="checkStartTime" >
                                            <DatePicker class="query-form-el" v-model="dataToView.checkStartTime"
                                                        :options="{disabledDate(date) {return date && dataToView.checkEndTime && date.valueOf() > dataToView.checkEndTime;}}"
                                                        type="date" placeholder="请输入" ></DatePicker>
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <FormItem label="检查结束时间：" prop="checkEndTime" >
                                            <DatePicker class="query-form-el" v-model="dataToView.checkEndTime"
                                                        :options="{disabledDate(date) {return date && dataToView.checkStartTime && date.valueOf() < dataToView.checkStartTime;}}"
                                                        type="date" placeholder="请输入" ></DatePicker>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around">
                                    <Col span="23" >
                                        <FormItem label="总结简述：" prop="notes" >
                                            <Input class="query-form-el" v-model="dataToView.notes" type="textarea" :rows="2" />
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around">
                                    <Col span='11'>
                                        <FormItem label="二级集团环保负责人：" prop="approvalUser">
                                            <div>{{dataToView.approvalUserName}}</div>
                                        </FormItem>
                                    </Col>
                                    <Col span='11'>
                                        <FormItem label="集团审核人："  prop="aduitUser">
                                            <div>{{dataToView.aduitUserName }}</div>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11">
                                        <FormItem label='填报人：' prop='registrant'>
                                            {{dataToView.createUserName}}
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <FormItem label='填报人手机号：' prop='registrantPhone'>
                                            {{dataToView.registrantPhone}}
                                        </FormItem>
                                    </Col>
                                </Row>

                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="23">
                                        <FormItem label="审计报告：">
                                            <div>
                                                <Upload ref="upload"
                                                        :before-upload="(file) => { beforeUpload(file, 'id') }"
                                                        :show-upload-list="true"
                                                        :max-size="10240"
                                                        multiple
                                                        type="drag"
                                                        :action="fileUrl">
                                                    <div style="padding: 10px">
                                                        <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                        <p>点击将文件拖拽到这里上传</p>
                                                        <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
                                                    </div>
                                                </Upload>
                                            </div>
                                            <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='index'>
                                                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                                <Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')" style="margin-left: 5px;margin-bottom: 3px"/>
                                                <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                            </div>
                                        </FormItem>
                                    </Col>
                                </Row>

                            </Form>
                        </Col>
                    </div>

                    <div :style="{ overflowY: 'auto'}" v-else>
                        <Col span="24">
                            <Form :model="dataToView" ref="dataToView" :rules="ruleCustom" :label-width="160">
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="23" >
                                        <FormItem label="集团名称：" prop="belongOrgId">
                                            {{dataToView.belongOrgName}}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11" >
                                        <FormItem label="年度：" prop="year" >
                                            {{dataToView.year}}
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <FormItem label="检查企业数量：" prop="checkNumCompany" >
                                            {{dataToView.checkNumCompany}}
                                        </FormItem>
                                    </Col>

                                </Row>
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11">
                                        <FormItem label="检查开始时间：" prop="planStart">
                                            {{formatDate(new Date(dataToView.checkStartTime), 'yyyy-MM-dd')}}
                                        </FormItem>
                                    </Col>
                                    <Col span="11" >
                                        <FormItem label="检查结束时间：" prop="whetherComments">
                                            {{formatDate(new Date(dataToView.checkEndTime), 'yyyy-MM-dd')}}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around">
                                    <Col span="23" >
                                        <FormItem label="总结简述：" prop="notes" >
                                            {{dataToView.notes}}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around">
                                    <Col span='11'>
                                        <FormItem label="二级集团环保负责人：" prop="approvalUser">
                                            {{dataToView.approvalUserName}}
                                        </FormItem>
                                    </Col>
                                    <Col span='11'>
                                        <FormItem label="集团审核人："  prop="aduitUser">
                                            {{dataToView.aduitUserName }}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="11">
                                        <FormItem label='填报人：' prop='registrant'>
                                            {{dataToView.createUserName}}
                                        </FormItem>
                                    </Col>
                                    <Col span="11">
                                        <FormItem label='填报人手机号：' prop='registrantPhone'>
                                            {{dataToView.registrantPhone}}
                                        </FormItem>
                                    </Col>
                                </Row>

                                <Row type="flex" justify="space-around" class="code-row-bg">
                                    <Col span="23">
                                        <FormItem label="整改方案附件：">
                                            <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='item'>
                                                <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                                <Progress v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                            </div>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row v-if="!taskInfo.viewFlag">
                                    <Col span="11">
                                        <FormItem label="审批结果：" prop="route">
                                            <Select  v-model="dataToView.route"  @on-change="routePush">
                                                <Option v-for="item in approveList" :value="item.value" :key="item.value">{{ item.text }}</Option>
                                            </Select>
                                        </FormItem>
                                    </Col>

                                </Row>
                                <Row v-if="!taskInfo.viewFlag">
                                    <Col span="11">
                                        <FormItem label="处理意见：" prop="opinion">
                                            <Input v-model="dataToView.opinion" type="textarea" :rows="2" />
                                        </FormItem>
                                    </Col>
                                </Row>

                            </Form>
                        </Col>
                    </div>
                </Card>
            </i-col>
        </Row>
    </Layout>
</template>


<script>
    import {Api} from '../../../api/index.js'
    import cascaderDom from "../../../components/cascader-dom.vue"
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components: {
            cascaderDom
        },
        data() {
            return {
                ...this.createCommonDataField(),
                user:{},
                taskInfo:{},
                fileUrl: Api.interestedPartiesUserFile,
                viewFlag : false,
                flag : false,
                buttonloading1: false,
                approveList : [
                    {
                        text:"通过",
                        value:"1"
                    },
                    {
                        text:"不通过",
                        value:"2"
                    }
                ],
                tableHeight : 450,
                ruleCustom : {
                    opinion: [{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.opinion == undefined ||this.dataToView.opinion == null || this.dataToView.opinion == '' ) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                    route: [
                        { required: true, message: '  ', trigger: 'blur' }
                    ]
                },
                twoLevel:[],
                chargeList:[],
                aduitUserList:[],
            }
        },
        mounted: function() {
            if(this.$route.query.close == false){
                this.$http.get(Api.getUserByUserId + this.$route.query.userId)
                    .then(function(res){
                        this.user = res.data.data;
                        this.$http.get(Api.getTaskData + "/" + this.$route.query.procinstId + "/" +
                            this.$route.query.taskId+"?close="+this.$route.query.close).then(function(res1){
                            this.taskInfo = res1.data;
                            if(res1.data.viewFlag == false)
                                this.taskInfo.viewFlag = false;
                            else
                                this.taskInfo.viewFlag = true;
                            this.query();
                            return ;
                        })
                    })
            }else{
                var search=window.location.href.split('?')[1];//截取URL？后面的参数
                var params={};
                if(search!=""&&search!=undefined){
                    search.split("&").forEach(
                        function(val){
                            var arr=val.split("=");
                            params[arr[0]]=arr[1];
                        }
                    )}
                var code=params.code
                var status = params.status
                if(code != null && code != 'undefine'){
                    this.$http.get(Api.queryToken, {
                        params: {
                            code: code,
                        }
                    }).then(res1 => {
                        if(res1.data.errcode == "1014"){
                            this.$http.get(Api.getReZheng).then(res2=>{
                                window.location.href = decodeURIComponent(res2.bodyText) + "&redirect_uri="+encodeURIComponent(window.location.href);
                            })
                        }
                        else{
                            this.$http.get(Api.getUserByUserId + this.$route.query.userId)
                                .then(function(res){
                                    this.user = res.data.data;
                                    this.$http.get(Api.getTaskData + "/" + this.$route.query.procinstId + "/" +
                                        this.$route.query.taskId+"?close="+this.$route.query.close).then(function(res1){
                                        this.taskInfo = res1.data;
                                        if(res1.data.viewFlag == false)
                                            this.taskInfo.viewFlag = false;
                                        else
                                            this.taskInfo.viewFlag = true;
                                        this.query();
                                        return ;
                                    })
                                })
                        }
                    })
                }
                else{
                    this.$http.get(Api.getReZheng).then(res2=>{
                        window.location.href = decodeURIComponent(res2.bodyText) + "&redirect_uri="+encodeURIComponent(window.location.href);
                    });
                }
            }
            this.selectSecGroupNames()
        },
        methods: {
            ...pageCommonFunction,
            returnTo(){
                if(this.taskInfo.close == true)
                    window.close();
                else
                    this.$router.go(-1);
            },
            routePush(value){
                if (value === '1') {
                    this.dataToView.opinion = "同意";
                }else{
                    this.dataToView.opinion = null;
                }
            },

            query() {
                let url = Api.getEvalSummary;
                let id = this.taskInfo.workId;
                this.$http.get(url + '/' + id, {params: {}}).then((res) => {
                    this.dataToView = res.data.data;
                    this.dataToView.yearDate = new Date(this.dataToView.year + '-01-01');
                    this.getFiles('id');
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },

            submitAndUpdate(){
                this.$refs['dataToView'].validate((valid) => {
                    if (valid) {
                        this.buttonloading1 = true;
                        let data = {};
                        data = {
                            createUserId: this.user.userId,
                            userName: this.user.userName,
                            opinion: this.dataToView.opinion,
                            taskId: this.taskInfo.taskId,
                            procinstId: this.taskInfo.procinstId,
                        };

                        this.dataToView.updateUserId = this.user.userId
                        this.dataToView.updateOrgId = this.user.orgInfo.orgId
                        this.$http.put(Api.updateEvalSummary, this.dataToView).then((res) => {
                            if (res.data.status == '200') {
                                data.route = '1';
                                this.$http.get(Api.taskComplete, {params: data}).then((res) => {
                                    this.buttonloading1 = false;
                                    if (res.data.status == '200') {
                                        this.$Message.success("审批成功")
                                        this.returnTo();
                                    } else {
                                        this.$Message.success("审批失败")
                                    }
                                }).catch(e => {
                                    this.buttonloading1 = false;
                                    this.$Message.error("数据获取失败")
                                })
                            }
                        }).catch(e => {
                            this.buttonloading1 = false;
                            this.$Message.error('请求失败');

                        })


                    }
                })
            },
            submit() {
                this.$refs['dataToView'].validate((valid) => {
                    if(valid) {
                        this.buttonloading1 = true;
                        let data = {};
                        data = {
                            createUserId : this.user.userId,
                            userName : this.user.userName,
                            opinion : this.dataToView.opinion,
                            taskId : this.taskInfo.taskId,
                            procinstId : this.taskInfo.procinstId,
                            route : this.dataToView.route
                        };
                        this.$http.get(Api.taskComplete, {params: data}).then((res) => {
                            console.log(res)
                            this.buttonloading1 = false;
                            if(res.data.status=='200'){
                                this.$Message.success("审批成功")
                                this.returnTo();
                            }else{
                                this.$Message.success("审批失败")
                            }
                        }).catch(e => {
                            this.buttonloading1 = false;
                            this.$Message.error("数据获取失败")
                        })


                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            selectSecGroupNames(){
                this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                    this.twoLevel=res.data.data
                }).catch(e => {
                })
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        },
    }
</script>
<style scoped>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }

</style>
